


Adding iOS Text Messages to Your Work

by selfishlaundry



Category: Original Work
Language: English
Status: Completed
Published: 2019-05-18
Updated: 2019-05-18
Packaged: 2020-03-06 05:35:51
Rating: General Audiences
Warnings: Creator Chose Not To Use Archive Warnings
Chapters: 1
Words: 3,360
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/18844690
Author URL: https://archiveofourown.org/users/selfishlaundry/pseuds/selfishlaundry
Summary: This is a simple tutorial for using HTML to create basic iOS text messages in Ao3. I'll do my best to make this easy to understand! This is intended for users who have little-to-no experience with this process at all, so bear with me if it's a bit redundant about some features you're already familiar with.





	Adding iOS Text Messages to Your Work

1\. The first thing you need to do is make a Work Skin on Ao3. This one is easy, because I've already made it!

 

\- Open this link in a new tab: [Work Skin](https://archiveofourown.org/works/18843868)

 

\- In another Ao3 tab (easiest if you just duplicate this one), navigate to your dashboard, and click "Skins" (on the left-hand side).

  
  
\- Click the button that says "My Work Skins".

  
  
\- Then, in the top right-hand corner, click "Create Work Skin".

  
  
\- Name your Work Skin whatever you like.

\- Copy the entire contents of my Work Skin (the one from the link you opened)...

\- Into the body of yours...

\- Then "Submit" it.

  
  
  
2\. Now let's practice making text messages.

 

\- In yet another Ao3 tab (again, easiest if you just duplicate the one you're in right now, and I promise this is the last one), start a regular draft to practice in by clicking "Post New".

\- Set this page up however you want, in regards to archive warnings, titles, etc. In my case, since this is just for practice, I've chosen General Audiences, not to use archive warnings, and "Original Work".

\- I named my work "iOS Practice".

\- If you're practicing this in an existing work, or are accustomed to posting on Ao3 then you already know what to do :)

\- In the "Select Work Skin" dropdown, choose the Work Skin you just created a few minutes ago by copying and pasting. Mine is called "selfishlaundry ios".

  
  
\- Make sure your editor is set to HTML as opposed to Rich Text.

 

Okay, here we go.

 

\- This first bit of HTML will give you a text conversation with a contact name/number at the top, and a white background (the white background is only visible in preview mode, as the posted work will have a white background anyway - it helps to visualize it though).

 

<div class="phone">  
<p class="body">  
<span class="header">Contact</span><br />  
<br />  
<span class="blueText"><span class="hide"><b>Character A:</b></span>Hi.</span><br />  
<br />  
<span class="blueTextTail"><span class="hide"><b>Character A:</b></span>How are you?</span><br />  
<br />  
<span class="greyText"><span class="hide"><b>Character B:</b></span>I'm good!</span><br />  
<br />  
<span class="greyTextTail"><span class="hide"><b>Character B:</b></span>How have you been doing?</span><br />  
<br />  
<span class="greenText"><span class="hide"><b>Character A:</b></span>I've been good.</span><br />  
<br />  
<span class="greenTextTail"><span class="hide"><b>Character A:</b></span>Reading too much fanfiction.</span><br />  
<br />  
<span class="greyText"><span class="hide"><b>Character B:</b></span>Never.</span><br />  
<br />

</p></div>

 

Copy this code and paste it into your work, and I'll explain it in more detail below (as pictured, don't forget your work skin and the HTML editor button).

 

\- When you preview this, it will look like:

Close up:

 

If you don't want the Contact name or number, you can forgo the **"header"** line, and change **"body"** to **"bodyNoHeader"**.

The rationale behind this choice is purely aesthetic. Sometimes it is visually appealing and narratively appropriate to have messages float freely without the contact name at the top.

 

The resulting HTML will look like this:

 

<div class="phone">  
<p class="bodyNoHeader">  
<br />  
<span class="blueText"><span class="hide"><b>Character A:</b></span>Hi.</span><br />  
<br />  
<span class="blueTextTail"><span class="hide"><b>Character A:</b></span>How are you?</span><br />  
<br />  
<span class="greyText"><span class="hide"><b>Character B:</b></span>I'm good!</span><br />  
<br />  
<span class="greyTextTail"><span class="hide"><b>Character B:</b></span>How have you been doing?</span><br />  
<br />  
<span class="greenText"><span class="hide"><b>Character A:</b></span>I've been good.</span><br />  
<br />  
<span class="greenTextTail"><span class="hide"><b>Character A:</b></span>Reading too much fanfiction.</span><br />  
<br />  
<span class="greyText"><span class="hide"><b>Character B:</b></span>Never.</span><br />  
<br />

</p></div>

 

If you want to copy/paste this code to test it out, go ahead! You can even paste it right beneath the other chunk and you'll be able to see both, one on top of the other.

With preview:

\- Up close:

Note: These messages will appear over the white background of your posted work transparently. They won't have this off-grey color behind them (that's just the color of the preview screen).

 

 

 Okay, so let's break it down.

 

<div class="phone">

\- The **"phone"** line is required.

 

<p class="body"> OR <p class="bodyNoHeader">

\- The **"body"** or  **"bodyNoHeader"** line is required. You simply have to decide which aesthetic you're going for, and change the name accordingly.

 

<span class="header">Contact</span><br />  
<br />

\- Only use the **"header"** line in conjunction with  **"body"** (not **"bodyNoHeader"** ). Use  **"header"** if you want to have the Contact name/number at the top.

 

<span class="blueText"><span class="hide"><b>Character A:</b></span>Hi.</span><br />  
<br />

\- **"blueText"** is a blue bubble message from the character holding the phone.

 

<span class="blueTextTail"><span class="hide"><b>Character A:</b></span>How are you?</span><br />  
<br />

\- **"blueTextTail"** is a blue bubble with a "tail".

 

<span class="greyText"><span class="hide"><b>Character B:</b></span>I'm good!</span><br />  
<br />

- **"greyText"** is a grey bubble coming from the character not holding the phone.

 

<span class="greyTextTail"><span class="hide"><b>Character B:</b></span>How have you been doing?</span><br />  
<br />

\- **"greyTextTail"** is a grey bubble with a "tail".

 

<span class="greenText"><span class="hide"><b>Character A:</b></span>I've been good.</span><br />  
<br />  
<span class="greenTextTail"><span class="hide"><b>Character A:</b></span>Reading too much fanfiction.</span><br />  
<br />

\- **"greenText"** and **"greenTextTail"** are identical to the blue bubbles (show on the right side of the screen), just green in color.

 

</p></div>

\- The **" < /p>< /div>" **tags will always be the last line in your text conversation HTML code.

 

 

In each of the message variants, you will see the actual content of the text. Type whatever you want your characters to say in the places where I have written "Hi.", and "How are you?", etc.

If you're using a **"header"** , you'll replace the word "Contact", with the name/number of the character you want to be the recipient of the texts.

 

The speech bubbles with and without tails are purely for aesthetics. Make them all have tails, if you like. Doesn't matter. Totally up to you.

 

Here I changed "Contact" to "Reader", as well as the content of the messages:

<div class="phone">  
<p class="body">  
<span class="header">Reader</span><br />  
<br />  
<span class="blueText"><span class="hide"><b>Character A:</b></span>Now is a good time to go into your work, and play around with these values.</span><br />  
<br />  
<span class="blueTextTail"><span class="hide"><b>Character A:</b></span>See what you like.</span><br />  
<br />  
<span class="greyText"><span class="hide"><b>Character B:</b></span>Try it out!</span><br />  
<br />

</p></div>

 

 

**Formatting**

(For when the Creator's Style is turned off, or when someone is reading from a platform that doesn't support it - like an eReader).

 

**"Character A"** and **"Character B"** are the two characters participating in the text conversation so far in my examples. They appear after the **"hide"** tags, and these values are invisible most of the time, but they're there so that a reader who can't see your style will still be able to understand what's going on in the story.

You'll want to change these to the names of your characters! (This also helps you keep track of who's saying what.)

 

So, for example, if Rey is the one holding the phone, and Ben is on the other end of it, we'll change these values to look like this:

<div class="phone">  
<p class="body">  
<span class="header">Ben</span><br />  
<br />  
<span class="blueTextTail"><span class="hide"><b>Rey: </b></span>Which program do Jedi use to open PDF files?</span><br />  
<br />  
<span class="greyTextTail"><span class="hide"><b>Ben: </b></span>Ugh</span><br />  
<br />  
<span class="blueText"><span class="hide"><b>Rey: </b></span>Oh, come on!</span><br />  
<br />  
<span class="blueTextTail"><span class="hide"><b>Rey: </b></span>At least have a guess...</span><br />  
<br />  
<span class="greyTextTail"><span class="hide"><b>Ben: </b></span>Microsoft Edge</span><br />  
<br />  
<span class="blueText"><span class="hide"><b>Rey: </b></span>Microsof...</span><br />  
<br />  
<span class="blueTextTail"><span class="hide"><b>Rey: </b></span>Microsoft Edge?!! What even is that??</span><br />  
<br />  
<span class="greyTextTail"><span class="hide"><b>Ben: </b></span>Are you going to tell me the answer or do I have to Bing it?</span><br />  
<br />  
<span class="blueTextTail"><span class="hide"><b>Rey: </b></span>Wow</span><br />  
<br />  
<span class="greyTextTail"><span class="hide"><b>Ben: </b></span>Rey...</span><br />  
<br />  
<span class="blueTextTail"><span class="hide"><b>Rey: </b></span>I honestly don't think you'll get it</span><br />  
<br />  
<span class="greyTextTail"><span class="hide"><b>Ben: </b></span>I Bing'd it. What does Adobe Wan Kenobi mean??</span><br />  
<br />

</p></div>

 

Copy this code into your work, and preview:

Up Close:

Now click "Save Without Posting".

Then "Hide Creator's Style". (We're just doing this so you can see what it will look like. Normally, you'd have no reason to click this.)

This is how your text conversation will appear to someone who can't see the style:

Close up:

 

So obviously that's very important! It keeps your work legible across platforms.

 

 

**Emojis (UPDATED 05.24.19)**

The easiest way to use emojis in your text messages is the same way you use them in comments you make here on Ao3 (and the same way you do everything else in this tutorial 😂)... _copy/paste._

 

Update: There's really no need for emoji keyboard extensions, it turns out. (Sorry about that!).

 

If you use Windows:

You can press **Win** \+ **;** (Windows key + Semicolon key, in that order), and it will pop up an emoji keyboard for you!

On the people emoji tab, you can change skin tone:

Just click the emoji that you want, and it will automatically show up where you're typing. 👌👌🏻👌🏼👌🏽👌🏾👌🏿

On Windows, we suffer from a lack of emojis. 😭

Here's the issue with that: If you try to use an emoji that is not supported on Windows yet, it will look like this: 🥰. (To all the Mac users looking at this right now, it looks like the cute smiley with hearts all around it). So be aware that there is a difference in platforms regarding what's supported.

 

If you use Mac:

You can press **^** \+ **⌘** \+ **Space** (Control key + Command key + Space bar, in that order), and you'll see something very similar.

Skin tone options will appear when you click an emoji that has them:

 

Mac users beware! There are emojis that Windows users can't see! If you're worried about that, stay away from the newest ones. (Or maybe you just don't care 😈).

 

[Emojipedia](https://emojipedia.org/), is also a wonderful resource for emojis. It takes a little more work to find what you want, but if you're on Windows you'll be able to see which ones don't work for you.

 

Emoji Limitations:

I'm still working this out, but as of right now, you can't use "combination" emojis. By "combination", I mean like the families 👩👩👧👧 and the occupations 👩🏫 ...or this is how they will look.

I'm not sure how many others are like this, so it'll just have to be trial-and-error to figure it out.

The "gendered" emojis, like these: 🤷♀ 🤷♂ show up with gender symbols after them. 

 

Sorry about this, I am still a bit confused about it - I don't know if this is just a limitation of Ao3 or what. But I'm working on getting around it. Also wondering if I'm just missing something.

 

 

To have emojis appear on their own lines:

I'm going to introduce two new types of messages here, **"emojiRight"** , and **"emojiLeft"**. You will use them exactly the same way as you use the text messages.

 

<div class="phone">  
<p class="body">  
<span class="header">Finn</span><br />  
<br />  
<span class="greenTextTail"><span class="hide"><b>Rey: </b></span>You like jokes right? You like laughing and smiling like a normal, non-Ben human person? <span class="hide"><b>*Eyes Emoji*</b></span>👀</span><br />  
<br />  
<span class="greyTextTail"><span class="hide"><b>Finn: </b></span>YES</span><br />  
<br />  
<span class="emojiRight"><span class="hide"><b>Rey: </b></span><span class="hide"><b>*Clapping Hands Emoji*</b></span>👏</span><br />  
<br />  
<span class="greenTextTail"><span class="hide"><b>Rey: </b></span>Why was Mon Mothma banned from Jedi training?<span class="hide"><b>*Thinking Emoji*</b></span> 🤔</span><br />  
<br />  
<span class="greyTextTail"><span class="hide"><b>Finn: </b></span>Because she wasn't Force-sensitive?</span><br />  
<br />  
<span class="greenTextTail"><span class="hide"><b>Rey: </b></span>Because she kept trying to fly into the lightsabers.</span><br />  
<br />  
<span class="emojiLeft"><span class="hide"><b>Finn: </b></span><span class="hide"><b>*Joy Emoji*</b></span>😂😂😂</span><br />  
<br />  
</p></div>

 

Copy and paste this code into your work, and hit preview:

Close up:

 

Breakdown:

 

<span class="emojiRight"><span class="hide"><b>Rey: </b></span><span class="hide"><b>*Clapping Hands Emoji*</b></span>👏</span><br />  
<br />

**\- "emojiRight"** will make the emoji appear on the right side of the screen, sent by the person holding the phone. In this case, Rey.

 

<span class="emojiLeft"><span class="hide"><b>Finn: </b></span><span class="hide"><b>*Joy Emoji*</b></span>😂😂😂</span><br />  
<br />

**\- "emojiLeft"** will appear on the left, sent by the person on the other end. Or, Finn.

 

You'll notice the **"hide"** tags are still being used here - this is once again to compensate for a platform that doesn't support the style. This is what the reader will see instead of the emoji:

I chose asterisks and the official emoji descriptions, but it's completely up to you! Use whatever you believe will best represent your emoji usage textually.

 

The emojis will work themselves out across platforms, as far as the appearance they take on. I wrote this tutorial on a PC, so in the screenshots so far you've seen them how they look with Windows (the style is really lacking in my opinion but 🤷).

But if I look at my practice work on my iPhone, they will look like Apple emojis.

Proof (it's huge so you can see them, sorry):

 

 

Well! 😅 *long, slow exhale*

That just about covers it for basic back-and-forth iOS text messages, with emojis.

 

Simply copy and paste this HTML code exactly as it is, and fill out the pertinent information to your specifications. Like a form! No need to change any of the "spans" or brackets or anything.

As you add text messages, just choose whether you want blue ones ( **blueText** , **blueTextTail** ), green ones ( **greenText** , **greenTextTail** ), grey ones on the left side ( **greyText** , **greyTextTail** ), or emojis on their own lines ( **emojiRight, emojiLeft** ). And, of course, whether you want a contact at the top ( **header** \+ **body** , **bodyNoHeader** ).

And always, always preview your work periodically, to make sure you like how everything looks!

 

It gets a little bit more complicated (but not a whole lot!) to add images/gifs, timestamps, read receipts, and other cool stuff into your conversation. I will definitely be getting to that soon!

 

**Posting**

If you are already used to posting into the HTML editor on Ao3, then just keep doing what you're doing, and copy/paste your new text messages in between the paragraphs where you want to see them!

 

If you typically use the Rich Text editor, and without me knowing exactly what sort of formatting you're accustomed to, this is probably the easiest solution if you'd like text messages in your fics:

I have tested the following method, and at least as far as I know right now, this is what I think your best option is. (If anyone knows of a better way, definitely let me know. I have never posted anything so I don't have clearly defined thoughts/preferences on this just yet).

You'll have to copy your text (a chapter you're ready to post) and paste it into an HTML converter. I believe google docs offers a converter already, and there are plenty of them online. I write in Word, and I tried this one out and it seems to work well: [Word to HTML](https://www.textfixer.com/html/convert-word-to-html.php)

It looks a little fly-by-night, but I didn't have any issues with it.

 

Take the lovely words you've written (and now converted to clunky HTML), and paste them into your work. Then take the lovely text messages you've made and paste them into the space between paragraphs where you want them.

 

😎👌

 

 

 

 

 

**Bonus** :

(Copy/Paste the code below into your work to see an example of how texts can be woven in between written words, and also forgive me because I wrote this in five minutes and it's silly).

 

-A Conclusion-

 

<p>Rey smiled warmly at the screen, leaned back, and threw her feet up on the desk, content. At least Finn thought she was funny.</p>  
  
<p>Her phone buzzed again.</p>  
  
<div class="phone">  
<p class="body">  
<span class="header">Ben</span><br />  
<br />  
<span class="greyText"><span class="hide"><b>Ben: </b></span>Okay, I get it.</span><br />  
<br />  
<span class="greyTextTail"><span class="hide"><b>Ben: </b></span>Like Obi-Wan Kenobi.</span><br />  
<br />  
</p></div>  
  
<p>His Binging had served him well, it seemed. Only took ten minutes.</p>  
  
<p>Perhaps out of spite - both for his apparent inability to find her amusing, and because now, thanks to him, she was using <i>Bing</i> as a verb, too - she wrote:</p>  
  
<div class="phone">  
<p class="bodyNoHeader">  
<span class="blueText"><span class="hide"><b>Rey: </b></span>If you date someone who doesn't like Star Wars puns...</span><br />  
<br />  
<span class="blueTextTail"><span class="hide"><b>Rey: </b></span>...then you're looking for love in Alderaan places</span><br />  
<br />  
</p></div>  
  
<p>She supposed it was probably a good thing he didn't just <i>pretend</i> to laugh at her jokes. That was a dangerous precedent to set, and anyway his general taciturnity was one of her favorite things about him. If he suddenly started sending her rofl emojis, she'd have to get in contact with an old priest and a young priest.</p>  
  
<div class="phone">  
<p class="bodyNoHeader">  
<span class="greyTextTail"><span class="hide"><b>Ben: </b></span>Are you ready?</span><br />  
<br />  
<span class="blueText"><span class="hide"><b>Rey: </b></span>Born ready</span><br />  
<br />  
<span class="blueTextTail"><span class="hide"><b>Rey: </b></span>Wait for what?</span><br />  
<br />  
<span class="greyTextTail"><span class="hide"><b>Ben: </b></span>For me to throw you the ultimate Star Wars punchline layup.</span><br />  
<br />  
</p></div>  
  
<p>Rey laughed. She seriously doubted his ability to do any such thing but...what the hell.</p>  
  
<div class="phone">  
<p class="bodyNoHeader">  
<span class="blueTextTail"><span class="hide"><b>Rey: </b></span>Let's go Solo</span><br />  
<br />  
</p></div>  
  
<p>The typing indicator flashed at the bottom of the screen for far too long - a visual representation of his indecision. Rey didn't know much about basketball, but she was fairly certain layups didn't take 100 years to execute.</p>  
  
<p>Maybe he was imagining it in slow-motion.</p>  
  
<div class="phone">  
<p class="bodyNoHeader">  
<span class="greyTextTail"><span class="hide"><b>Ben: </b></span>I love you.</span><br />  
<br />  
</p></div>  
  
<p>  
  <i>Oh.</i>  
</p>  
  
<p>Rey blinked down at her screen.</p>  
  
<p>"Oh!" she said, out loud. To no one. She smiled so big it made her cheeks hurt.</p>  
  
<p>  
  <i>Well.</i>  
</p>  
  
<p>She couldn't just leave him hanging in the middle of the ultimate <i>Star Wars</i> punchline layup, could she?</p>  
  
<p>Rey typed all five letters as fast as her shaking thumbs would allow.</p>  
  
<div class="phone">  
<p class="bodyNoHeader">  
<span class="blueTextTail"><span class="hide"><b>Rey: </b></span>I know</span><br />  
<br />  
</p></div>

 

**Author's Note:**

> If you see any mistakes/issues with any of this, or have any suggestions for better methods, please let me know! 
> 
> And if you have any questions at all you can comment here, or find me in TWD and on Twitter as selfishlaundry.
> 
> Also, thank you to slipgoingunder, who uses text messages so perfectly in her work, and who let me ask her a bunch of questions about it!


End file.
